<template>
    <view :class="['mpopup', { visible: visible }]" v-show="visible">
        <view class="popup_content">
            <view class="flex-between header">
                <view></view>
                <text class="title">{{ title }}</text>
                <image class="img" src="/static/cha.png" @tap="handleHiden" />
            </view>
            <view>
                <slot></slot>
            </view>
        </view>
    </view>
</template>
<script setup lang="ts">
import { computed } from 'vue';

interface Props {
    title?: string,
    modelValue: boolean
}
interface EmitProps {
    (e: "update:modelValue", val: boolean): void;
    (e: "hiden"): void;
}
const props = withDefaults(defineProps<Props>(), {})
const emit = defineEmits<EmitProps>();
const visible = computed({
    get: () => props.modelValue,
    set: (val: boolean) => {
        console.log(val, "cccccc");

        emit("update:modelValue", val)
    }
})
const handleHiden = () => {
    emit("hiden")
    visible.value = false
}
</script>
<style lang="scss">
.mpopup {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.5s;
}

.popup_content {
    width: 100%;
    max-width: 100%;
    background-color: #f8f8f8;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    position: absolute;
    bottom: 0;
    transform: translateY(100%);
    transition: transform 0.3s ease-in-out;
    box-sizing: border-box;
    padding-bottom: 60rpx;
    border-top-right-radius: 20rpx;
    border-top-left-radius: 20rpx;

    .header {
        padding: 30rpx;
        font-weight: bold;

        .img {
            width: 30rpx;
            height: 30rpx;
        }
    }
}

.mpopup.visible {
    background-color: rgba(0, 0, 0, 0.5);

    .popup_content {
        transform: translateY(0%);
    }
}
</style>